<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>对账明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../../../component/elementUI/index.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <style>
      .el-input.is-disabled .el-input__inner {
        color: #000;
        background-color: #fff;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <yl-page-header content="与供应商对账"></yl-page-header>
      <el-form
        ref="contract"
        inline-message="true"
        :model="form"
        style="width: 100%"
      >
        <div class="table_titel">
          <div class="titel">筛选条件</div>
        </div>

        <el-descriptions :column="3" border size="small">
          <el-descriptions-item label="供应商名称">
            <el-form-item prop="Supplier_SerialNumber">
              <el-select
                v-model="Supplier_SerialNumber"
                placeholder="请选择"
                style="width: 100%"
                @change="gyhandleChange"
              >
                <el-option
                  v-for="item in Supplier"
                  :key="item.Supplier_SerialNumber"
                  :label="item.Supplier_Name"
                  :value="item.Supplier_SerialNumber"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="商品名称">
            <el-form-item prop="Article_SerialNumber">
              <el-select
                v-model="Article_SerialNumber"
                filterable
                placeholder="请选择商品名称"
                style="width: 100%"
              >
                <el-option
                  v-for="item in iJSONArray_article_info"
                  :key="item.Article_SerialNumber"
                  :label="item.Article_Name"
                  :value="item.Article_SerialNumber"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>

          <!-- <el-descriptions-item label="活动名称">
            <el-form-item prop="hdmc">
              <el-select
                v-model="hdmc"
                placeholder="请选择活动名称"
                style="width: 100%"
              >
                <el-option
                  v-for="item in iJSONArray_hdmc"
                  :key="item.Activity_Name"
                  :label="item.Activity_Name"
                  :value="item.Activity_SerialNumber"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item> -->
          <el-descriptions-item label="时间范围">
            <el-form-item>
              <el-date-picker
                style="border: 0; width: 100%"
                prefix-icon="el-icon-date"
                v-model="form.Sales_Date"
                clearable
                type="datetimerange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-descriptions-item>
          <!-- <el-descriptions-item label="下单人">
            <el-form-item prop="xdr">
              <el-input
                v-model.trim="form.xdr"
                clearable
                placeholder="请输入下单人"
              />
            </el-form-item>
          </el-descriptions-item> -->
          <el-descriptions-item label="下单人手机号">
            <el-form-item prop="phone">
              <el-input
                v-model.trim="form.phone"
                clearable
                placeholder="请输入下单人手机号"
              />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="订单编号/订单明细编号">
            <el-form-item prop="Sales_Order_SerialNumber">
              <el-input
                v-model.trim="form.Sales_Order_SerialNumber"
                clearable
                placeholder="订单编号/订单明细编号"
              />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-form-item prop="value">
              <el-select
                v-model="value"
                placeholder="请选择订单状态"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <div class="table_titel">
          <div class="titel">对账明细</div>
          <div class="operation">
            <el-button type="primary" @click="chaxun('contract')"
              >查询</el-button
            >
          </div>
        </div>
        <el-table
          :data="tableData.slice((form.page-1)*form.limit,form.page*form.limit)"
          stripe
          border
          height="650"
          :row-key="row=>row.Sales_Order_Detail_SerialNumber"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            type="selection"
            :reserve-selection="true"
            width="45"
          ></el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <!-- <el-table-column
            align="center"
            prop="Sales_Order_Detail_SerialNumber"
            width="300"
            show-overflow-tooltip
            label="订单明细编号"
          ></el-table-column> -->
          <el-table-column
            align="center"
            prop="Sales_Order_SerialNumber"
            width="250"
            show-overflow-tooltip
            label="订单编号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Activity_Name"
            width="300"
            show-overflow-tooltip
            label="活动名称"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Sales_Date"
            width="180"
            show-overflow-tooltip
            label="日期"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Member_Nike"
            width="150"
            show-overflow-tooltip
            label="下单人"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Sales_Address"
            width="300"
            show-overflow-tooltip
            label="下单地址"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Sales_Phone"
            width="300"
            show-overflow-tooltip
            label="下单手机号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="name"
            width="150"
            show-overflow-tooltip
            label="订单状态"
          >
            <template slot-scope="scope">
              {{ scope.row.Row_Status == 2 ? '发货' : '签收' }}
              <!-- 假设单位是“件”，可按需修改 -->
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="Supplier_Name"
            width="150"
            show-overflow-tooltip
            label="供应商"
          ></el-table-column>
          <!-- <el-table-column
            align="center"
            prop="Article_Name"
            width="300"
            show-overflow-tooltip
            label="商品名称"
          ></el-table-column> -->
          <el-table-column
            align="center"
            prop="Quantity"
            width="80"
            show-overflow-tooltip
            label="数量"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Purchase_Unit_Price"
            width="150"
            show-overflow-tooltip
            label="一件代发单价（元）"
          >
          </el-table-column>
          <el-table-column
            align="center"
            width="150"
            show-overflow-tooltip
            label="一件代发总价（元）"
          >
            <template slot-scope="scope">
              {{ scope.row.Purchase_Unit_Price * scope.row.Quantity }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="300"
            label="实际结算金额（元）"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.paymentableamount"
                :min="scope.row.Purchase_Unit_Price * scope.row.Quantity"
                :step="1"
                label="描述文字"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="Note"
            width="180"
            show-overflow-tooltip
            label="备注"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.Note"
                size="small"
              ></el-input> </template
          ></el-table-column>
          <!-- <el-table-column
            align="center"
            prop="Sales_Unit_Price"
            width="150"
            show-overflow-tooltip
            label="平台单价"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Amount"
            width="150"
            show-overflow-tooltip
            label="平台总价"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Activity_Unit_Price"
            width="150"
            show-overflow-tooltip
            label="活动单价"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            width="150"
            show-overflow-tooltip
            label="活动总价"
          >
            <template slot-scope="scope">
              {{ scope.row.Activity_Unit_Price * scope.row.Quantity }}
            </template></el-table-column
          >

          <el-table-column
            align="center"
            prop="Amount"
            width="300"
            show-overflow-tooltip
            label="付款总价"
          ></el-table-column> -->
          <!-- <el-table-column
            align="center"
            prop="Specifications_Name"
            width="150"
            show-overflow-tooltip
            label="规格名称"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Sales_Date"
            width="180"
            label="下单时间"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="Collection_Date"
            width="180"
            label="付款时间"
          >
            <template v-slot="{row}">
              <span>{{getYMDHMSDate(row.Collection_Date)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            v-if="!isSupplier"
            prop="Sales_Unit_Price"
            width="100"
            label="销售单价"
          ></el-table-column> -->
          <!-- <el-table-column
            align="center"
            prop="Purchase_Unit_Price"
            width="170"
            label="一键代发单价（元）"
          ></el-table-column> -->
          <!-- <el-table-column
            align="center"
            prop="Delivery_Quantity"
            width="100"
            label="发货数量"
          ></el-table-column> -->
          <!-- <el-table-column
            align="center"
            width="170"
            label="一键代发总价（元）"
          >
            <template v-slot="{row}">
              <span
                >{{accMul(row.Delivery_Quantity,
                row.Purchase_Unit_Price)}}</span
              >
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            align="center"
            width="170"
            label="实际结算金额（元）"
          >
            <template v-slot="{row}">
              <el-input
                type="number"
                size="mini"
                style="width: 110px"
                v-model="row.Purchase_Amount"
                placeholder="可修改实际结算金额"
              ></el-input>
            </template>
          </el-table-column> -->
          <!-- <el-table-column align="center" width="170" label="备注">
            <template v-slot="{row}">
              <el-input
                type="number"
                size="mini"
                style="width: 110px"
                v-model="row.Notes"
                placeholder="备注"
              ></el-input>
            </template>
          </el-table-column> -->
          <!-- <el-table-column align="center" prop="Row_Status" label="发货状态">
            <template v-slot="{row}">
              <el-tag
                :type="row.Row_Status=='0'?'':row.Row_Status=='1'?'warning':'success'"
                >{{Type(row.Row_Status)}}</el-tag
              >
            </template>
          </el-table-column> -->
          <!-- <el-table-column align="center" fixed="right" prop="Row_Status" label="操作">
                    <template v-slot="{row,$index}">
                        <el-button size="small" :disabled="loading" type="danger" @click="handleRemove($index)">删除</el-button>
                    </template>
                </el-table-column> -->
        </el-table>
        <el-pagination
          style="margin-top: 5px; margin-bottom: 5%"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[10, 20, 30, 50 ,100 ,300 ,500]"
          :page-size="form.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
        <el-dialog title="请输入对账单名称" :visible.sync="dialogFormVisible">
          <el-form :model="Purchase_Name">
            <el-form-item label="对账单名称" :label-width="formLabelWidth">
              <el-input v-model="Purchase_Name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="qd">确 定</el-button>
          </div>
        </el-dialog>
        <el-form-item class="form-operation">
          <el-button @click="window.history.back()">返回</el-button>
          <el-button
            type="primary"
            :loading="loading"
            @click="submitForm('contract')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script
      type="text/javascript"
      src="../../../utils/jquery.cookie.js"
    ></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script
      type="text/javascript"
      src="../../../component/elementUI/index.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../component/component.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../utils/FileSaver.min.js"
    ></script>
    <script type="text/javascript" src="../../../utils/FileSaver.js"></script>
    <script
      type="text/javascript"
      src="../../../utils/xlsx.full.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../../utils/xlsx.core.min.js"
    ></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
  </body>
</html>
